<script setup lang="ts">
import type { CategoryItemProps } from './type'
import { useGlobalStore } from '@/store/global'
import { delHtmlTag } from '@/utils'
import { ElSkeleton, ElSkeletonItem } from 'element-plus'

import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'

defineOptions({
  name: 'CategoryItem',
})

const { data, tag, column = 2 } = defineProps<CategoryItemProps>()
const { t } = useI18n()
const { width } = storeToRefs(useGlobalStore())
</script>

<template>
  <div class="root w py30">
    <ElSkeleton animated :loading="!data">
      <template #template>
        <div v-if="column == 2" class="mt30 rd-8 bg-white p20">
          <div class="mb20 fx-j-b">
            <ElSkeletonItem variant="h3" class="h30 w10%" />
            <ElSkeletonItem variant="h3" class="h30 w10%" />
          </div>
          <div class="fx gap25">
            <div class="fx1">
              <ElSkeletonItem variant="image" class="h100% w100% rd-8" />
            </div>
            <div class="fx1">
              <div
                v-for="item in 4"
                :key="item"
                class="fx gap10"
                :class="{ mb20: item !== 4 }"
              >
                <ElSkeletonItem variant="image" class="h60 w100 rd-8" />
                <div class="fx1 pt10">
                  <ElSkeletonItem variant="h3" class="mb6 w60%" />
                  <ElSkeletonItem variant="h3" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="mt30 rd-8 bg-white p20">
          <div class="mb20 fx-j-b">
            <ElSkeletonItem variant="h3" class="h30 w10%" />
            <ElSkeletonItem variant="h3" class="h30 w10%" />
          </div>
          <div class="list">
            <div v-for="item in width > 750 ? 3 : 1" :key="item" class="item">
              <ElSkeletonItem
                variant="image"
                style="height: 222px"
                class="rd-8"
              />
              <ElSkeletonItem variant="h3" class="my10 w80%" />
              <ElSkeletonItem variant="h3" />
            </div>
          </div>
        </div>
      </template>
      <template #default>
        <!-- 标题 start -->
        <div class="fx-j-b fx-a-c">
          <span class="text-20">
            <slot name="name">
              {{ data.categoryName }}
            </slot>
          </span>
          <div
            v-if="morePath"
            class="fx-a-c pointer text-#999"
            @click="$router.push(morePath)"
          >
            <span>{{ t("base_查看更多") }}</span>
            <span class="i-ep:arrow-right" />
          </div>
        </div>
        <!-- 标题 end -->
        <!-- 列表 start -->
         <!-- web -->
        <div v-if="column == 3" class="list rd-8 bg-white py20">
          <div
            v-for="(, i) in width > 800 ? 3 : width > 600 ? 2 : 1"
            :key="i"
            class="item pointer"
            @click="
              $router.push({
                path: `/informations/${tag}/${data.Datas?.[i]?.CategoryId}/${data.Datas?.[i]?.id}`,
                query: { title: data.categoryName },
              })
            "
          >
            <template v-if="data.Datas?.[i]?.CoverImage">
              <img :src="data.Datas?.[i]?.CoverImage" alt="">
              <div class="line-clamp-1 my10 text-#333">
                {{ data.Datas?.[i]?.Title }}
              </div>
              <div class="line-clamp-1 text-#999">
                {{ delHtmlTag(data.Datas?.[i]?.Content) }}
              </div>
            </template>
          </div>
        </div>
         <!-- 移动端 -->
        <div v-else class="fx gap12 rd-8 bg-white px18 py20">
          <div v-if="width > 800" class="fx1">
            <img
              class="h100% w100% rd-8"
              :src="data.Datas?.[0]?.CoverImage"
              alt=""
            >
          </div>
          <div class="fx1">
            <div v-for="(v, i) in 4" :key="i" :class="{ mb20: v !== 4 }">
              <div
                v-if="data.Datas?.[i]?.CoverImage"
                class="fx pointer"
                @click="
                  $router.push({
                    path: `/informations/${tag}/${data.Datas?.[i]?.CategoryId}/${data.Datas?.[i]?.id}`,
                    query: { title: data.categoryName },
                  })
                "
              >
                <!-- <img
                  class="w100 h60 brd4"
                  :src="data.Datas?.[i]?.CoverImage"
                  alt=""
                /> -->
                <div>
                  <div class="line-clamp-1 my10 text-#333">
                    {{ data.Datas?.[i]?.Title }}
                  </div>
                  <div class="fs12 line-clamp-1 text-#999">
                    {{ delHtmlTag(data.Datas?.[i]?.Content) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 列表 end -->
      </template>
    </ElSkeleton>
  </div>
</template>

<style lang="scss" scoped>
.root {
  .list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    .item {
      flex: 1;
      // max-width: calc((100% - 24px) / 3);
      img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        aspect-ratio: 366 / 222;
      }
    }
  }
}
</style>
